@import '../../../../app/mixins.css';

.wrapper {
  box-sizing: border-box;
  padding: 10px 20px;
  width: 100%;

  & .fieldGroup {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
  }

  & .fieldLabel {
    @mixin contentNormal bold;

    color: var(--color-maastricht-blue);
    margin-bottom: 8px;
  }

  & .input {
    margin-bottom: 2px;
  }

  & .fieldInput {
    align-items: center;
    display: flex;
    position: relative;
    width: 100%;
  }

  & button {
    height: 36px;
    width: 100%;
  }

  & .editButtonContainer {
    transition:
      opacity var(--animation-speed-fast) linear,
      max-height var(--animation-speed-fast) linear,
      margin-bottom var(--animation-speed-fast) linear;

    &.show {
      opacity: 1;
      max-height: 200px;
      margin-bottom: 12px;
    }

    &.hide {
      opacity: 0;
      max-height: 0;
      margin-bottom: 0;
    }
  }
}
